<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header
        style="text-align: right; font-size: 12px; border-bottom: 1px solid #bebebe;"
    >
      <common-header></common-header>
    </el-header>

    <el-container style="overflow: hidden;">
      <!-- 侧边栏区域 -->
      <div :class="['sidebar', { 'expanded': !isCollapse }]" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
        <el-menu
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
        >
          <el-menu-item v-for="item in menuItems"
                        :key="item.name"
                        :class="['elAsideDiv', { active: selectedItem === item.path }]"
                        @click="handleClick(item.path)">
            <i class="el-icon-menu"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 主容器，包含列表区域 -->
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import CommonHeader from "../components/CommonHeader.vue";

export default {
  data() {
    return {
      menuItems: [
        {
          path: "websiteManage",
          name: "网站管理",
        },
        {
          path: "spaceManage",
          name: "空间管理",
        },
        {
          path: "accountManage",
          name: "账号管理",
        },
        {
          path: "domainManage",
          name: "域名管理",
        },
        {
          path: "helpCenter",
          name: "帮助中心",
        },
        {
          path: "SEOOptimization",
          name: "SEO优化",
        },

        {
          path: "recycleBin",
          name: "回收站",
        },
        {
          path: "articleManage",
          name: "文章管理",
        },
        // {
        //   path: "productManage",
        //   name: "产品管理",
        // },
        // {
        //   path: "videoManage",
        //   name: "视频管理",
        // },
      ],
      selectedItem: "",
      isCollapse: true // 默认为收起状态
    };
  },
  created() {
    // 在sessionStorage中存储token
    sessionStorage.setItem("XAccessToken", 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOjEsImV4cCI6MTcyNjI1ODg3OSwicGxhdGZvcm0iOjIsInVzZXJuYW1lIjoiMTUwNzMxNzEzMjAifQ.hsW2zoK0NOVqAeoHrV-mORCVdp3gBRlsH1mcIILe7V8');
    sessionStorage.setItem("SysAccessToken", 'm7mSzYLFvbbFDU+d4fXFwg==');

    this.selectedItem = this.$route.path.split("/Main/")[1] || "websiteManage";
    this.$watch("$route", (to, from) => {
      this.selectedItem = to.path.split("/Main/")[1] || "websiteManage";
    });
  },
  methods: {
    handleClick(path) {
      const fullPath = `/Main/${path}`;

      if (this.$route.path != fullPath && !(fullPath === "/")) {
        this.$router.push(fullPath);
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleMouseEnter() {
      this.isCollapse = false; // 鼠标移入时展开
    },
    handleMouseLeave() {
      this.isCollapse = true; // 鼠标移出时收起
    }
  },
  components: {
    CommonHeader,
  },
};
</script>

<style lang="scss" scoped>
.sidebar {
  position: fixed;
  top: 60px; /* 头部高度 */
  bottom: 0;
  left: 0;
  width: 64px; /* 收缩状态下的宽度 */
  transition: width 0.3s ease;
  z-index: 1000; /* 确保覆盖在页面内容之上 */
}

.sidebar.expanded {
  width: 200px; /* 展开状态下的宽度 */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: calc(100vh - 60px); /* 减去头部的高度 */
}

.el-menu-vertical-demo {
  border-right: none; /* 移除默认的右边框 */
}

/* 确保主容器有适当的左侧填充 */
.el-container > .el-container {
  padding-left: 64px; /* 根据收缩状态下的宽度调整 */
}

/* 当菜单展开时，保持主内容区位置不变 */
.el-container > .el-container .el-main {
  margin-left: 0;
}

/* 头部区域 */
.el-header {
  color: #333;
  line-height: 60px;
}

/* 侧边栏区域 */
.aside {
  background-color: rgb(15, 22, 66, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .elAsideDiv {
    color: white;
    padding: 10px 60px 10px 65px;
  }

  .elAsideDiv:hover {
    color: rgba(172, 163, 255, 1);
    cursor: pointer;
  }

  .elAsideDiv.active {
    background-color: rgba(172, 163, 255, 0.2);
    color: rgba(172, 163, 255, 1);
  }

  .introduces {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    color: white;

    .introduceBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      .el-button{
        width: 60px;
        height: 50px;
        margin: 0 10px;
        padding: 8px 14px;
        p{
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          text-wrap: wrap;
          line-height: 18px;
        }
      }
    }

    .QRcodeStyle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      p {
        margin: 8px 0;
      }
    }
  }
}
</style>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
</style>
